<template>
  <view class="case-detail">
    <navbar :title="`${title}`">
      <view slot="left"></view>
    </navbar>
    <view class="body">
      <rich-text :nodes="detail.content" preview class="rich" @itemclick="clickImage"/>
    </view>
    <u-safe-bottom/>
  </view>
</template>

<script>
import {getCaseDetail} from "@/api/home";

export default {
  data() {
    return {
      title: "案例详情",
      detail:{}
    };
  },
  methods: {
    getInfo(id) {
      uni.showLoading()
      getCaseDetail({id}).then(res => {
        uni.hideLoading()
        res.content = this.$utils.formatRichText(res.content)
        this.detail = res
        this.title = res.title
      })
    },
    clickImage(e) {
      const node = e.detail.node
      if (node.name == 'img') {
        uni.previewImage({
          urls: [node.attrs.src]
        })
      }
    },
  },
  onLoad(options) {
    console.log(options);
    this.getInfo(options.id);
  },
}
</script>

<style lang="scss">
page {
  background: #fff;
}
.case-detail {
  .body {
    padding: 0 24rpx;
  }
  .rich {
    line-height: 1.5;
    font-size: 28rpx;
    img,image {
      max-width: 100%;
    }
  }
}
</style>
